<template>
  <div class="box">
    <div class="header">
      <div>
        <i class="el-icon-refresh-left" @click="recover"></i>
        <el-button type="primary" @click="addType" style="margin-left: 10px"
          >添加</el-button
        >
      </div>

      <div class="search">
        <el-input
          style="width: 75%"
          v-model="content"
          @keyup.native.enter="search"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>
    </div>

    <el-table style="width: 100%" :data="typeData">
      <el-table-column type="index" label="序号" width="200px">
      </el-table-column>
      <el-table-column prop="name" label="类型"> </el-table-column>
      <el-table-column label="操作">
        <slot slot-scope="{ row, $index }">
          <el-button
            type="info"
            icon="el-icon-edit"
            circle
            @click="editType(row.id, $index)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delType(row)"
          ></el-button>
        </slot>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        @current-change="jump"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import {
  addType,
  delType,
  editType,
  typeLoad,
  getTypeBooks,
  searchType,
} from "@/api/";
export default {
  data() {
    return {
      count: 0,
      pageSize: 5,
      typeData: [],
      pageNum: 1,
      content: "",
    };
  },
  methods: {
    // 刷新
    recover() {
      this.typeLoad(1);
      this.pageNum = 1;
    },
    // 搜索
    async search() {
      if (!this.content.trim()) {
        this.$message({
          message: "搜索内容不能为空",
          type: "warning",
        });
        this.content = "";
        return;
      }
      let { data } = await searchType(this.content);
      this.typeData = data;
    },
    // 添加分类
    addType() {
      this.$prompt("请输入类型", "添加", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (!value) {
            this.$message({
              type: "warning",
              message: "请输入",
            });
            return;
          }
          let { data } = await addType(value);
          let { code, message } = data;
          if (code === 20000) {
            this.$message({
              type: "success",
              message,
            });
          }
          if (code === 20003) {
            this.$message({
              type: "warning",
              message,
            });
          }
          this.typeLoad(this.pageNum);
        })
        .catch(() => {});
    },
    // 删除分类
    async delType(type) {
      let id = type.id;
      let name = type.name;
      let { data } = await getTypeBooks(id);
      let { code } = data;
      let message;
      if (code === 20000) {
        message = `${name}下面还有书籍确认要删除吗?`;
      } else {
        message = `确定要删除${name}吗?`;
      }
      this.$confirm(`${message}`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (this.typeData.length === 1) {
            this.pageNum -= 1;
          }
          let { data } = await delType(id);
          let { code, message } = data;
          if (code === 20000) {
            this.$message({
              type: "success",
              message,
            });
          }
          this.typeLoad(this.pageNum);
        })
        .catch(() => {});
    },
    // 编辑分类
    editType(id, index) {
      this.$prompt("请输入类型", "编辑", {
        inputValue: this.typeData[index].name,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (!value) {
            this.$message({
              type: "warning",
              message: "请输入",
            });
            return;
          }
          let { data } = await editType(id, value);
          let { code, message } = data;
          if (code === 20000) {
            this.$message({
              type: "success",
              message,
            });
          }
          this.typeLoad(this.pageNum);
        })
        .catch(() => {});
    },
    // 分页渲染
    async typeLoad(page) {
      let { data } = await typeLoad(page, this.pageSize);
      let { rows, typeCount } = data;
      this.typeData = rows;
      this.count = typeCount;
    },
    jump(...args) {
      this.pageNum = args[0];
      this.typeLoad(args[0]);
    },
  },
  mounted() {
    this.typeLoad(1);
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 98%;
  min-height: 100%;
  // border: 1px solid #ccc;
  position: relative;

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
  }
  .header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .search {
    width: 40%;
    display: flex;
    justify-content: space-between;
  }
}
</style>